<template>
  <Form ref="form" :model="entity" :rules="rules" :label-width="90">
    <Row>
      <Col :span="8">
        <FormItem :label="l('name')" prop="name">
          <Input v-model="entity.name"></Input>
        </FormItem>
      </Col>
      <Col :span="16">
        <FormItem :label="l('dbType')" prop="dbType">
          <RadioGroup v-model="entity.dbType">
        <Radio label="MySql">MySql</Radio>
        <Radio label="SqlServer">SqlServer</Radio>
        <Radio label="Sqlite">Sqlite</Radio>
        <Radio label="Oracle">Oracle</Radio>
        <Radio label="PostgreSQL">PostgreSQL</Radio>
    </RadioGroup>
        </FormItem>
      </Col>
      <Col :span="24">
        <FormItem :label="l('link')" prop="link">
          <Input v-model="entity.link" type="textarea" :rows="5"></Input>
        </FormItem>
      </Col>
      <Col :span="24">
        <FormItem :label="l('note')" prop="note">
          <Input v-model="entity.note" ></Input>
        </FormItem>
      </Col>
           <Col :span="24">
        <FormItem >
            <Button type="warning" @click="link" >测试</Button>
        </FormItem>
      </Col>
    </Row>
    <FormItem>
      <Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
      <Button @click="handleClose" class="ml20">取消</Button>
    </FormItem>
  </Form>
</template>
    <script>
import Api from "./api";
export default {
  name: "Add",
  data() {
    return {
      disabled: false,
      entity: { name: "", link: "", dbType: "", note: "" },
      rules: {
        name: [{ required: true, message: "必填", trigger: "blur" }]
      }
    };
  },
  props: {
    v: Object,
    eid: String
  },
  mounted() {
    if (this.eid.length > 0) {
      this.load(this.eid);
    }
  },
  methods: {
    link()  {
      Api.link(this.entity).then(r=>{
        if (r.success) {
                this.$Message.success("Ok");
              } else {
                this.$Message.error(r.error.message);
              }
      })
    },
    handleSubmit() {
      this.$refs.form.validate(v => {
        if (v) {
          this.disabled = true;
          Api.create(this.entity)
            .then(r => {
              this.disabled = false;
              if (r.success) {
                this.$Message.success("保存成功");
                this.$emit("on-ok");
              } else {
                this.$Message.error("保存失败");
              }
            })
            .catch(err => {
              this.disabled = false;
              this.$Message.error("保存失败");
              console.warn(err);
            });
        }
      });
    },
    handleClose() {
      this.$emit("on-close");
    },
    load(v) {
      Api.get({ id: v }).then(r => {
        this.entity = r.result;
        this.entity.id = 0;
      });
    },
      l(key) {
         let vkey = "DBLink" + "." + key;
          if(vkey==this.$t(vkey)){
               return this.$t(key)
          }else{
              return this.$t(vkey)
          }
      }
  },
  watch: {
    v() {
      this.entity = this.$u.clone(this.v);
    },
    eid(v) {
      if (v.length > 0) {
        this.load(v);
      }
    }
  }
};
</script>